﻿<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" type="text/css" href="../css/elem.css"/>
  <link rel="stylesheet" href="../css/display.css" />
  <title>element-ui</title>
  <style>
    .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
      background: #000;
      width: 900px;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  </style>
</head>
<body>
  <div id="app">
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element</p>
    </el-dialog>
	  <el-button @click="startHacking">Start</el-button>
<el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="5"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light">987</div></el-col>
</el-row>
<el-row>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
</el-row>

<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

<el-row :gutter="20" class="hidden-lg-and-up">
  <el-col :span="12" :offset="6"><div class="grid-content bg-purple">当视口在 lg 及以下尺寸时隐藏</div></el-col>
</el-row>

  </div>
</body>
  <!-- import Vue before Element -->
  <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  <!-- import JavaScript -->
  <script src="../js/elem.js" type="text/javascript" charset="utf-8"></script>
  <script>
  	/**
  	  layout布局： 基础的 24 分栏
  	  通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。
  	  col：
  	  		:span="6" 控制栏数 。 不写默认24栏。
  	  			demo:	<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
  	  		:offset="6" 指定分栏便宜的栏数 . 相当于margin-left:栏数
  	  		    demo:
  	  		    <el-col :offset="6" :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
  	  row:
  	  		:gutter: 指定每一栏之间的间隔，默认间隔为 0
  	  		demo: <el-row :gutter="20">
  	  		type="flex"   justify="center..."  可以启用 flex 布局，并可通过 justify 属性来指定 
  	  		demo: 
  	  		<el-row type="flex" class="row-bg" justify="center">
  	 
  	 */
  	/**
  	 Data: 
  	 	show-summary    设置为true就会在表格尾部展示合计行
  	 	summary-method: 自定义合计行
  	 */
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      },
	  methods: {
    startHacking () {
      this.$notify({
        title: '我来修改一下试试!',
        type: 'success',
        message: 'We\'ve laid the ground work for you. It\'s time for you to build something epic!',
        duration: 5000
      })
    }
  }
    })
  </script>
</html>